<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
</head>
<body>
  <h1>倒计时</h1>
  <div class="day"></div>
  <div class="hour"></div>
  <div class="min"></div>
  <div class="sec"></div>
</body>
<script>
  const daySpan = document.querySelector('.day'),
        hourSpan = document.querySelector('.hour'),
        minSpan = document.querySelector('.min'),
        secSpan = document.querySelector('.sec'),
        deadline = new Date('2020-6-18 00:00');
  function countdown() {
    const now = new Date(), timeRemaining = deadline - now;
    let day, hour, minute, second;
    if ( timeRemaining < 0) {
      return 0;
    }

    second = Math.floor( timeRemaining / 1000 % 60);
    minute = Math.floor( timeRemaining / 1000 / 60 % 60);
    hour = Math.floor( timeRemaining / 1000 / 60 / 60 % 24);
    day = Math.floor( timeRemaining / 1000 / 60 / 60 / 24);

    daySpan.innerHTML = day + '天';
    hourSpan.innerHTML = hour + '小时' 
    minSpan.innerHTML = minute + '分';
    secSpan.innerHTML = second + '秒';

    setTimeout( countdown, 1000 );
  }

  countdown();
</script>
</html>